import { PageContainer } from '@ant-design/pro-layout';
import { useState } from 'react';
import ETCConfig from './Config';
import ReportETCRecordList from './ReportRecord';

const ETCPages = () => {
  const [tab, setTab] = useState<string>('config');
  return (
    <PageContainer
      header={{
        breadcrumb: {
          routes: [
            {
              path: '/',
              breadcrumbName: '首页',
            },
            {
              path: '/etc',
              breadcrumbName: 'ETC助缴',
            },
          ],
        },
      }}
      tabList={[
        { tab: 'ETC配置', key: 'config' },
        { tab: 'ETC推送记录', key: 'report' },
      ]}
      tabActiveKey={tab}
      onTabChange={(key) => setTab(key)}
    >
      {tab === 'config' && <ETCConfig />}
      {tab === 'report' && <ReportETCRecordList />}
    </PageContainer>
  );
};

export default ETCPages;
